var DoItUp = function() {
      var canvas;
      var bg_img;
      return {
        init: function() {
          canvas = new Canvas.Element();
	  bg_img = new Canvas.Img('bg2', {});
          canvas.init('canvid1', { width: bg_img.currentWidth, height: bg_img.currentHeight }); 
	  canvas.setCanvasBackground(bg_img, 0, 0);
	  //init hidden images
	  setTimeout(function() {
		  XmlList.setupHiddenImages(document.getElementById("hiddenimages"));
	   }, 1000);
        },
	changeBg: function(elem) {
          var _img = new Canvas.Img(elem, {});
	  canvas.setCanvasBackground(_img, 0, 0);
        },
        addToCanvas: function(id) {		
		XmlList.addImageToCanvas(canvas, id);
    	},
        createImage: function() {
		var imgData = canvas.canvasTo('jpeg');
        	window.open(imgData, "_blank");
    	},
	clearCanvas: function() {
		canvas.emptyImages();
		canvas.renderAll(false);
	},
	clearPrevious: function() {
		canvas.clearPrevious();
	}
      }
    }();

var FavouriteBar = function() {
	return {
		remove: function(id) {
			var rem_div = "fav_"+id;
			var link_div = "favlink_"+id;
			var fav = document.getElementById('favourites');
			var rem_img = document.getElementById(rem_div);
			var rem_link = document.getElementById(link_div);
			fav.removeChild(rem_img);
			fav.removeChild(rem_link);
		},
		fill: function() {
			var n = 0, count = window.sessionStorage.length;            
			while (n < count) {
			     var id = window.sessionStorage.key(n);
			     document.getElementById("favourites").innerHTML += "<img src='images/teos"+id+".jpg' class='mikro' onclick=\"DoItUp.addToCanvas('"+id+"');\"/>";
			}
		}
	}
    }();

var UtilityBar = function() {
	var utilityDiv = "button";
	return {
		makeLink: function(id) {
			var favlink = document.getElementById("favlink");
			favlink.setAttribute("onclick", "XmlList.addFavourite(\""+id+"\");");
		}
	}
}();

var XmlList = function() {
	var xml;
	var groups = [];
	var works = [];
	var basedir;
	return {
		init: function(_xml) {
			xml = _xml;
			$(xml).find("groupname").each(function(){
				groups.push($(this).text());
			});
			basedir = $(xml).find("basedir").text();
		},
		setupGalleryTabs: function(div) {
			var buffer = "<ul>";
			$(xml).find("groupname").each(function(){				
				var id = $(this).attr('id');
				var name = $(this).text();
				var html = "";
				html = html + "<li><a href='#tabs-"+id+"' onclick='XmlList.addGallery(\""+id+"\");'>"+name+"</a></li>";
				buffer = buffer + html;
			});
			buffer = buffer + "</ul>";
			document.getElementById("tabs").innerHTML += buffer;
			var i = 0;
			$(xml).find("groupname").each(function(){
				var thisGroup = $(this).text();
				var thisGroupId = $(this).attr('id');
				document.getElementById("tabs").innerHTML += "<div id='tabs-"+thisGroupId+"'></div>";
				if (i==0) {
					$(xml).find("work").each(function(){
						var group = $(this).find('group').text();
						if (group==thisGroup) {
							var id = $(this).find('id').text();
							var src = basedir + $(this).find('file').text();		
							html = "<img src='"+src+"' class='mini' onclick='DoItUp.addToCanvas(\""+id+"\");'/>";
							document.getElementById("tabs-"+thisGroupId).innerHTML += html;
						}
					});
				}
				i = i+1;
			});
		},
		addGallery: function(gid) {
			var galleryDiv = "tabs-"+gid;
			var groupName = "";
			$(xml).find("groupname").each(function(){
				var thisGroup = $(this).text();
				var thisGroupId = $(this).attr('id');
				if (thisGroupId == gid) {
					groupName = thisGroup;
				}
			});
			var html = "";
			$(xml).find("work").each(function(){
				var group = $(this).find('group').text();
				if (group == groupName) {
					var id = $(this).find('id').text();
					var src = basedir + $(this).find('file').text();
					html += "<img src='"+src+"' class='mini' onclick='DoItUp.addToCanvas(\""+id+"\");'/>";
				}
			});
			document.getElementById(galleryDiv).innerHTML = html;
		},
		openDialog: function(id) {
			$(xml).find("work").each(function(){
				var _id = $(this).find('id').text();
				var html = "";
				if (id == _id) {
					var name = $(this).find('name').text();
					var artist = $(this).find('artist').text();
					var size = $(this).find('size').text();
					var year = $(this).find('year').text();
					var tech = $(this).find('technique').text();
					var price = $(this).find('price').text();
					var src = basedir + $(this).find('file').text();
					html += "<table width=\"200\">";
					html += "<tr><td><b>Name</b></td><td>"+name+"</td></tr>";
					html += "<tr><td><b>Artist</b></td><td>"+artist+"</td></tr>";
					html += "<tr><td><b>Size(cm)</b></td><td>"+size+"</td></tr>";
					html += "<tr><td><b>Year</b></td><td>"+year+"</td></tr>";
					html += "<tr><td><b>Technique</b></td><td>"+tech+"</td></tr>";
					html += "<tr><td><b>Price</b></td><td>"+price+"</td></tr>";
					html += "<tr><td colspan='2'>&nbsp;</td></tr>";
					html += "<tr><td colspan='2' align='center'><a id='example1' href='"+src+"' title='"+artist+", "+name+"'><img src='"+src+"' class='mikro'/></a></td></tr>";
					html += "<tr><td colspan='2'>&nbsp;</td></tr>";
					html += "<tr><td colspan='2' align='center'><a id='contactlink' href='http://www.galleriabe19.fi/Taidelainaamo/lomake_teokset.html' target='contact'>Contact</a></td></tr>";
					html += "</table>";
					document.getElementById("information").innerHTML = html;
					$("a#example1").fancybox({
						'opacity'	: true,
						'overlayShow'	: false,
						'transitionIn'	: 'elastic',
						'transitionOut'	: 'none',
						'titlePosition'	: 'inside'
					});
					var active = $( "#accordion2" ).accordion( "option", "active" );
					if (active!=2) {
						$( "#accordion2" ).accordion( "option", "active", 2);
					}
				}
			});
		},
		reloadInfo: function(id) {
			$(xml).find("work").each(function(){
				var _id = $(this).find('id').text();
				var html = "";
				if (id == "img"+_id) {
					var name = $(this).find('name').text();
					var artist = $(this).find('artist').text();
					var size = $(this).find('size').text();
					var year = $(this).find('year').text();
					var tech = $(this).find('technique').text();
					var price = $(this).find('price').text();
					var src = basedir + $(this).find('file').text();
					html += "<table width=\"200\">";
					html += "<tr><td><b>Name</b></td><td>"+name+"</td></tr>";
					html += "<tr><td><b>Artist</b></td><td>"+artist+"</td></tr>";
					html += "<tr><td><b>Size(cm)</b></td><td>"+size+"</td></tr>";
					html += "<tr><td><b>Year</b></td><td>"+year+"</td></tr>";
					html += "<tr><td><b>Technique</b></td><td>"+tech+"</td></tr>";
					html += "<tr><td><b>Price</b></td><td>"+price+"</td></tr>";
					html += "<tr><td colspan='2'>&nbsp;</td></tr>";
					html += "<tr><td colspan='2' align='center'><a href='"+src+"' id='example1' title='"+artist+", "+name+"'><img src='"+src+"' class='mikro'/></td></tr>";
					html += "<tr><td colspan='2'>&nbsp;</td></tr>";
					html += "<tr><td colspan='2' align='center'><a id='contactlink' href='http://www.galleriabe19.fi/Taidelainaamo/lomake_teokset.html' target='contact'>Contact</a></td></tr>";
					html += "</table>";
					document.getElementById("information").innerHTML = html;
					$("a#example1").fancybox({
						'opacity'	: true,
						'overlayShow'	: false,
						'transitionIn'	: 'elastic',
						'transitionOut'	: 'none',
						'titlePosition'	: 'inside'
					});
					var active = $( "#accordion2" ).accordion( "option", "active" );
					if (active!=2) {
						$( "#accordion2" ).accordion( "option", "active", 2);
					}
				}
			});
		},
		setupHiddenImages: function(div) {
			$(xml).find("work").each(function(){
				var id = "img" + $(this).find('id').text();
				var src = basedir + $(this).find('file').text();
				div.innerHTML += "<img id='"+id+"' src='"+src+"' class='hidden' width='350'/>";
			});
		},
		addFavourite: function(id) {
			$(xml).find("work").each(function(){
				var _id = $(this).find('id').text();
				var html = "";
				if (id == _id) {
					var src = basedir + $(this).find('file').text();
					document.getElementById("favourites").innerHTML += "<img src='"+src+"' id='fav_"+id+"' class='mikro' onclick=\"DoItUp.addToCanvas('"+id+"');\"/>";
					document.getElementById("favourites").innerHTML += "<a href='#' id='favlink_"+id+"' style='vertical-align: top; position: absolute;' onclick='FavouriteBar.remove(\""+id+"\")'><span class='ui-icon ui-icon-circle-close' style='display: table-cell;'></span></a>";
				}
				$('div#favourites a').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				    );
			});
		},
		addImageToCanvas: function(canvas, id) {
			var pixelWidth;
			$(xml).find("work").each(function(){
				var _id = $(this).find('id').text();
				if (id == _id) {
					size = $(this).find('size').text();
					if (size=="") {
						pixelwidth = "200";
					} else {
						var h_w = size.split('x');
						var width = h_w[1];
						width = width.replace(",", ".");
						var calculatedPixelWidth = width * 3.4;
						pixelwidth = calculatedPixelWidth;
						//pixelwidth = $(this).find('pixelwidth').text();
					}
				}
			});
			var _id = "img"+id;
	        	var result = canvas.addImage(new Canvas.Img(_id, {angle: 0, top: 300, left: 500, maxwidth: (pixelwidth)}));
			canvas.renderAll(false);
			if (result=="1") {
				UtilityBar.makeLink(id);
				XmlList.openDialog(id);
			}
		},
		emptyInfo: function() {
			document.getElementById("information").innerHTML = "";
		}
	}
}();

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
